<template>
  <view class="alldiv">
    <!-- 这个是头部筛选区域 -->
    <view class="topBox">
      <!-- 第一层搜索和返回 -->
      <view class="topdiv">
        <!-- 这个是返回区域 -->
        <view class="navdiv" @click="navigateBack">
          <u-icon name="arrow-left" size="35" color="rgba(0,0,0,0.9)"></u-icon>
        </view>
        <!-- 搜索区域 -->
        <view class="searchfordiv">
          <u-search
            shape="round"
            :placeholder="internationalization.Recommend.searchval"
            :showAction="false"
            v-model="searchval"
          ></u-search>
        </view>
      </view>
      <!-- 这个是筛选区域 -->
      <view class="screendiv">
        <u-subsection
          :list="list"
          border="none"
          :current="current"
          activeColor="rgba(47, 212, 184, 1)"
          inactiveColor="#000000"
          @change="sectionChange"
        ></u-subsection>
      </view>
    </view>
    <!-- 主体区域 -->
    <view class="btndiv">
      <!-- 子盒子列表 -->
      <view class="vtndd">
        <!-- 列表区域 -->
        <view class="listdiv" v-for="(item, i) in exchangestationlist" :key="i">
          <!-- 这个是标题和公里区域 -->
          <view class="titlediv">
            <!-- 金额 -->
            <view style="font-size: 14px; color: rgba(56, 56, 56, 1)">{{
              item.name
            }}</view>
            <view>
              <image
                src="../../static/image/kilometer.png"
                style="width: 8.71px; height: 8.76px"
                mode="scaleToFill"
              />
              <span
                style="
                  margin-left: 5px;
                  font-size: 12px;
                  font-weight: bold;
                  color: rgba(51, 51, 51, 1);
                "
                >{{ item.kilometer }}m</span
              >
            </view>
          </view>
          <!-- 这个是描述区域 -->
          <view class="msdiv">
            <view v-for="(itemd, d) in item.ms" :key="d"
              ><span style="margin-left: 5px">{{ itemd }} </span>
              <span style="margin-left: 5px">| </span></view
            >
          </view>
          <!-- 这个是流程 -->
          <view class="flowpathdiv">
            <!-- 这个是流程 -->
            <view class="flowpath">
              <!-- 这个是流程子区域 -->
              <view style="display: flex; align-items: center">
                <image
                  style="width: 19px; height: 19px; margin-left: 10px"
                  src="../../static/image/calculator.png"
                  mode="scaleToFill"
                />
                <!-- 这个是完成数和未完成数 -->
                <view style="margin-left: 10px">
                  <span
                    style="
                      font-size: 12px;
                      color: rgba(56, 56, 56, 1);
                      font-weight: bold;
                    "
                    >{{ item.incompletenum }}</span
                  >
                  <span
                    style="
                      font-size: 10px;
                      color: rgba(153, 153, 153, 1);
                      margin-left: 4px;
                    "
                    >/{{ item.assemblenum }}</span
                  >
                </view>
              </view>
            </view>
          </view>
          <!-- 这个是金额和按钮区域 -->
          <view class="costbtndiv">
            <view
              ><span style="font-size: 10px; color: rgba(255, 51, 51, 1)"
                >￥</span
              ><span
                style="
                  margin-left: 10px;
                  font-size: 16px;
                  font-weight: bold;
                  color: rgba(255, 51, 51, 1);
                "
                >{{ item.cost }}</span
              ></view
            >
            <view
              ><u-button
                style="
                  width: 100% !important;
                  height: 33px !important;
                  border-radius: 4px;
                  background: rgba(255, 255, 255, 1);
                  color: rgba(47, 212, 184, 1);
                  border: 1px solid rgba(47, 212, 184, 1);
                "
                >{{ internationalization.Recommend.navd }}</u-button
              ></view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      internationalization: {},
      // 搜索
      searchval: "",
      current: 0,
      list: [],
      // 换电站列表
      exchangestationlist: [
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
        {
          name: "PSO换电站",
          kilometer: "500m",
          ms: ["品牌xxx", "24小时", "地下"],
          assemblenum: "50",
          incompletenum: "23",
          cost: "103.30",
        },
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata(){
      this.internationalization =
      this.$store.getters["internationalization/getinternationalization"];
      this.list = this.internationalization.Recommend.listis
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;

  .topBox {
    width: 100%;
    height: 18%;
    display: inline-block;
    content: "";
    background: url("@/static/icon/shop/topBj2.png") no-repeat center center;
    overflow: hidden;
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 50%;
      display: flex;
      margin-bottom: 10px;
      // 这个是返回样式
      .navdiv {
        width: 15%;
        height: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
      }
      // 这个是搜索样式
      .searchfordiv {
        width: 85%;
        height: 100%;
        display: flex;
      }
    }
    // 这个是筛选样式
    .screendiv {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      // 这个是筛选的按钮
      .s1 {
        width: auto;
        height: 30px;
        align-items: center;
        display: flex;
        border-radius: 4px;
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        justify-content: center;
        margin-left: 10px;
      }
    }
  }
  // 主体区域样式
  .btndiv {
    width: 100%;
    height: 82%;
    background-color: #ffffff;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    // 子盒子元素样式
    .vtndd {
      width: 95%;
      height: 100%;
      background-color: #ffffff;
      overflow: auto;
      // 列表样式
      .listdiv {
        width: 100%;
        height: 30%;
        background-color: #ffffff;
        left: 16px;
        border-radius: 6px;
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        margin-top: 10px;
        margin-bottom: 10px;
        // 这个是标题和公里区域样式
        .titlediv {
          width: 100%;
          height: 25%;

          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        // 这个是描述样式
        .msdiv {
          width: 100%;
          height: 25%;
          font-size: 10px;
          display: flex;
          color: rgba(153, 153, 153, 1);
          align-items: center;
        }
        // 这个是流程样式
        .flowpathdiv {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          // 流程样式
          .flowpath {
            width: 99%;
            height: 95%;
            border-radius: 4px;
            background: linear-gradient(
              90deg,
              rgba(47, 212, 184, 0.25) 0%,
              rgba(47, 212, 184, 0) 100%
            );
            display: flex;
            align-items: center;
          }
        }
        // 这个是金额按钮区域样式
        .costbtndiv {
          width: 100%;
          height: 25%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
/deep/ .u-subsection__item.u-subsection__item--2.u-subsection__item--last {
  background-color: #ffffff !important;
  border-radius: 4px;
  border: none !important;
  margin-left: 5px;
}
/deep/ .u-subsection__item--last {
  border: none !important;
  border-radius: 4px;
  background-color: #ffffff !important;

  margin-left: 5px !important;
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  background-color: #ffffff !important;
  margin-left: 5px !important;
  border-radius: 4px;
  border: none !important;
}
/deep/ .u-subsection__item--no-border-right {
  background-color: #ffffff !important;
  margin-left: 5px !important;
  border: none !important;
  border-radius: 4px;
}

/deep/ .u-subsection__bar--center {
  background-color: #ffffff !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--last {
  background: #ffffff !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection__bar--first {
  background: #ffffff !important;
  border-radius: 8px !important;
}
/deep/ .u-subsection {
  display: flex;
  flex-direction: row !important;
  position: relative !important;
  overflow: hidden !important;
  width: 70% !important;
  box-sizing: border-box !important;
}
/deep/ .u-subsection__item__text {
  font-weight: bold !important;
  font-size: 12px !important;
}
/deep/ .u-subsection--button {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>